<template>
  <div>
    <el-tree
      :data="data"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 树形组件默认数据结构
      data: [
        {
          label: '总裁办', // 一部门
          children: [
            // 二级部门
            {
              label: '秘书处',
              children: [
                {
                  label: '李秘书'
                },
                {
                  label: '郭秘书'
                }
              ]
            },
            {
              label: '司机处',
              children: [
                {
                  label: '李司机'
                }
              ]
            }
          ]
        },
        {
          label: '前端开发',
          children: [
            {
              label: 'UI部',
              children: [
                {
                  label: 'ps'
                }
              ]
            },
            {
              label: '后端',
              children: [
                {
                  label: 'java'
                }
              ]
            }
          ]
        }
      ],
      // 自定义树形数据结构（自定义属性名）
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    // 点击节点
    /**
     * data 当前点击的节点数据
     */
    handleNodeClick (data) {
      console.log(data)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
